/*
 * @Author: 脉迈
 * @Date: 2021-09-15 17:50:35
 * @LastEditors: 脉迈
 * @LastEditTime: 2021-10-19 15:09:39
 */
import React, { useEffect, useState } from "react";
import BlockImage from "plugins/blockImage/blockImage";
import { transformProps, transformStyle } from "utils/helper";
import EditShape from "components/EditShape/Index";
import { data } from "model/data";
import { useEditorContext } from "context/EditorContext";
import styles from "./EditorBox.module.scss";

import {
  PlusCircleFilled,
  UpCircleFilled,
  DownCircleFilled,
  DeleteFilled,
} from "@ant-design/icons";
// import { Menu } from "antd";
// import { DiffFilled, DeleteFilled } from "@ant-design/icons";
// const { SubMenu } = Menu;
export default function Index() {
  const {
    componentsList,
    activeIndex,
    handlerSetActiveIndex,
    handlerSetComponentsList,
  } = useEditorContext();
  handlerSetComponentsList(data);
  const [renderList, setRenderList] = useState<any>([]);
  const [menuLocation, setMenuLocation] = useState({
    top: 0,
    left: 0,
  });
  /**
   * @description 根据后台返回的数据，动态渲染
   */
  const renderComponent = () => {
    return renderList.map((item: any, index: number) => {
      if (item.name === "blockImage") {
        const props = transformProps(item.properties);
        return (
          <EditShape
            // style={{ ...item.style }}
            style={{ ...transformStyle(item.style) }}
            key={index}
            defaultStyle={item.style}
            active={activeIndex === index}
            handleMousedownProp={() => {
              handlerSetActiveIndex(index);
            }}
            handleElementMouseUpProp={() => {}}
            handlePointMoveProp={(style: any) => {
              let newComponentsList = [...componentsList];
              newComponentsList[index].style = style;
              handlerSetComponentsList(newComponentsList);
            }}
            handlePointMouseUpProp={() => {}}
            handleContextMenuProp={(props: { left: number; top: number }) => {
              console.log(props);
              setMenuLocation(props);
            }}
            handleElementMoveProp={(style: any) => {
              // 点击移动同步top和left样式
              let newComponentsList = [...componentsList];
              newComponentsList[index].style = style;
              handlerSetComponentsList(newComponentsList);
              // setRenderList(newComponentsList)
            }}
          >
            <BlockImage {...props}></BlockImage>
          </EditShape>
          // <div key={index} style={{ ...transformStyle(item.style) }}>
          //   <BlockImage {...props}></BlockImage>
          // </div>
        );
      } else {
        // return <Block></Block>;
      }
    });
  };

  useEffect(() => {
    setRenderList(componentsList);
  }, [componentsList]);

  return (
    <div style={{ position: "relative" }}>
      <div className={styles.operation}>
        <PlusCircleFilled className={styles.icon} />
        <UpCircleFilled className={styles.icon} />
        <DownCircleFilled className={styles.icon} />
        <DeleteFilled className={styles.icon} />
      </div>
      <div className={styles.main}>
        {renderComponent()}

        {/* <Menu
        className={styles.contexMenu}
        style={{ left: `${menuLocation.left}px`, top: `${menuLocation.top}px` }}
      >
        <SubMenu
          key="zIndex"
          title={
            <>
              <DiffFilled />
              <span> 排序</span>
            </>
          }
        >
          <Menu.Item key="upTop"> 上移到顶层</Menu.Item>
          <Menu.Item key="downBottom">下移到底层</Menu.Item>
          <Menu.Item key="moveUp">上移一层</Menu.Item>
          <Menu.Item key="moveDown">下移一层</Menu.Item>
        </SubMenu>
        <Menu.Item key="delete">
          {" "}
          <DeleteFilled /> 删除
        </Menu.Item>
      </Menu> */}
      </div>
    </div>
  );
}
